<template>
    <div>
      <el-menu
        default-active="0"
        mode="horizontal"
        background-color="RGB(35,39,61)"
        active-text-color="#ffd04b"
        @select="handleSelect">
        <el-menu-item index="0">
<!--          <el-badge :is-dot="tableData[0].length!==0" type="warning">-->
            日报
<!--          </el-badge>-->
        </el-menu-item>
        <el-menu-item index="1">
<!--          <el-badge :is-dot="tableData[1].length!==0" type="warning">-->
            周报
<!--          </el-badge>-->
        </el-menu-item>
        <el-menu-item index="2">
<!--          <el-badge :is-dot="tableData[2].length!==0" type="warning">-->
            月报
<!--          </el-badge>-->
        </el-menu-item>
        <el-menu-item index="3">
<!--          <el-badge :is-dot="tableData[3].length!==0" type="warning">-->
            每日日常工作
<!--          </el-badge>-->
        </el-menu-item>
        <el-menu-item index="4">
<!--          <el-badge :is-dot="tableData[4].length!==0" type="warning">-->
            临时工作提醒
<!--          </el-badge>-->
        </el-menu-item>
      </el-menu>
      <div v-if="index!==4" class="tableContainer">
        <notice-grid :index="index"></notice-grid>
      </div>
      <div v-else class="tableContainer">
        <temp-notice-grid/>
      </div>
    </div>
</template>

<script>
import noticeGrid from './component/noticeGrid'
import tempNoticeGrid from './component/tempNoticeGrid'
// import request from '../../network/request'
export default {
  name: 'index',
  inject: ['reload'],
  components: {
    noticeGrid,
    tempNoticeGrid
  },
  data () {
    return {
      index: 0
    }
  },
  methods: {
    handleSelect (key) {
      this.index = parseInt(key)
    }
  }
}
</script>

<style scoped>
  .el-menu {
    border: 0;
  }
  .el-menu-item {
    width: 260px;
    text-align: center;
    font-size: 26px;
    color: white;
  }
  .tableContainer {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 40px;
  }
</style>
